<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gradio</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"/>
  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
  <style></style>
</head>

<body>
  <div class="bg-gray-100 p-2">
    <div class="max-w-5xl mx-auto">
      <div class="mb-2 text-center text-gray-800 font-semibold">THEME</div>
      <div class="theme-set mb-2 flex flex-wrap gap-x-2 gap-y-0.5 justify-center"></div>      
      <div class="mb-2 text-center text-gray-800 font-semibold">
        INPUTS (<a class="underline hover:text-blue-600" href="javascript:show_all_inputs();">all</a> / <a class="underline hover:text-blue-600" href="javascript:hide_all_inputs();">none</a>)
      </div>
      <div class="input-components mb-2 flex flex-wrap gap-x-2 gap-y-0.5 justify-center"></div>      
      <div class="mb-2 text-center text-gray-800 font-semibold">
        OUTPUTS (<a class="underline hover:text-blue-600" href="javascript:show_all_outputs();">all</a> / <a class="underline hover:text-blue-600" href="javascript:hide_all_outputs();">none</a>)
      </div>
      <div class="output-components mb-2 flex flex-wrap gap-x-2 gap-y-0.5 justify-center"></div>      
    </div>      
  </div>
  <div id="target"></div>

  <script>
    var set_theme = theme => {
      if (theme.startsWith("dark")) {
        document.querySelector("#target").classList.add("dark");
        theme = theme === "dark"? "default" : theme.substring(5);
      } else {
        document.querySelector("#target").classList.remove("dark");
      }
      document.querySelector(".gradio-bg").setAttribute("theme", theme);
    }
    var hidden_inputs = new Set();
    var hidden_outputs = new Set();    
    var reset_component_visibility = () => {
      let style_element = document.querySelector("style");
      let style_html = "";
      if (hidden_inputs.size > 0) {
        let inputs_selected = Array.from(hidden_inputs).map(i => `.panel:nth-child(1) .component:nth-child(${i + 1})`).join(", ");
        let examples_selected = Array.from(hidden_inputs).map(i => `.examples-table tr > *:nth-child(${i + 1})`).join(", ");
        style_html += `${inputs_selected}, ${examples_selected} { display: none !important }`;
        if (hidden_inputs.size === input_count - 1) {
          document.querySelector(".examples-table").classList.add("gallery");
        } else {
          document.querySelector(".examples-table").classList.remove("gallery");
        }
      }
      if (hidden_outputs.size > 0) {
        let outputs_selected = Array.from(hidden_outputs).map(i => `.panel:nth-child(2) .component:nth-child(${i + 2})`).join(", ");
        style_html += `${outputs_selected} { display: none !important }`;
      }
      style_element.innerHTML = style_html;

    }
    var toggle_input = index => {
      if (hidden_inputs.has(index)) {
        hidden_inputs.delete(index)
      } else {
        hidden_inputs.add(index)
      }
      reset_component_visibility();
    }
    var toggle_output = index => {
      if (hidden_outputs.has(index)) {
        hidden_outputs.delete(index)
      } else {
        hidden_outputs.add(index)
      }
      reset_component_visibility();
    }
    var show_all_inputs = () => {
      document.querySelectorAll(".input-components input").forEach(n => n.checked = true);
      hidden_inputs.clear();
      reset_component_visibility();
    }
    var hide_all_inputs = () => {
      document.querySelectorAll(".input-components input").forEach((n, i) => {
        hidden_inputs.add(i);
        n.checked = false;
      });
      reset_component_visibility();
    }
    var show_all_outputs = () => {
      document.querySelectorAll(".output-components input").forEach(n => n.checked = true);
      hidden_outputs.clear();
      reset_component_visibility();
    }
    var hide_all_outputs = () => {
      document.querySelectorAll(".output-components input").forEach((n, i) => {
        hidden_outputs.add(i);
        n.checked = false;
      });
      reset_component_visibility();
    }

    var input_count = 0;
    var output_count = 0;
    window.gradio_mode = "website";
  </script>
  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
  <script>
    let themes = ["default", "huggingface", "seafoam", "grass", "peach", "dark", "dark-huggingface", "dark-seafoam","dark-grass", "dark-peach"]
    let theme_html = "";
    for (let theme of themes) {
      theme_html += `<label><input type="radio" name="theme" ${theme == "huggingface" ? "checked": ""} onclick="set_theme('${theme}')"> ${theme}</label>`;
    }
    document.querySelector(".theme-set").innerHTML = theme_html;
    fetch('/demo/kitchen_sink/config')
      .then(response => response.json())
      .then(demo => {
        demo.root = "/demo/kitchen_sink/";
        launchGradio(demo, "#target");

        let input_html = "";
        for (let [i, input_component] of demo["input_components"].entries()) {
          input_html += `<label><input type="checkbox" checked name="input" onchange="toggle_input(${i})"> ${input_component["label"]}</label>`;
        }
        input_count = demo["input_components"].length;
        document.querySelector(".input-components").innerHTML = input_html;
        let output_html = "";
        for (let [i, output_component] of demo["output_components"].entries()) {
          output_html += `<label><input type="checkbox" checked name="output" onchange="toggle_output(${i})"> ${output_component["label"]}</label>`;
        }
        output_count = demo["output_components"].length;
        document.querySelector(".output-components").innerHTML = output_html;
      });
  </script>
</body>

</html>